<template>
  <el-collapse-item title="飞行线">
    <el-form-item label="显示">
      <el-switch v-model="attribute.lineData.show"></el-switch>
    </el-form-item>
    <tm-group label="标记symbol">
      <el-form-item label="标记大小">
        <el-input-number v-model="attribute.lineData.symbolSize"/>
      </el-form-item>
      <el-form-item label="标记颜色">
        <el-color-picker v-model="attribute.lineData.color" show-alpha/>
      </el-form-item>
      <el-form-item label="标记symbol" style="width: 100%;">
        <el-input v-model="attribute.lineData.symbol" clearable/>
      </el-form-item>
    </tm-group>


    <el-form-item label="线宽">
      <el-input-number v-model="attribute.lineData.lineStyle.width"/>
    </el-form-item>
    <el-form-item label="线条颜色">
      <el-color-picker v-model="attribute.lineData.lineStyle.color"/>
    </el-form-item>
    <el-form-item label="线条类型">
      <tm-radio v-model="attribute.lineData.lineStyle.type" :data="borderTypeList"></tm-radio>
    </el-form-item>
    <shadow-option :data="attribute.lineData.lineStyle"/>
  </el-collapse-item>
</template>

<script>
import tmRadio from "@/package/components/tm-radio";
import shadowOption from '../shadow-option'

export default {
  name: 'lines-option',
  cnName: 'lines-option',
  components: {
    tmRadio,
    shadowOption
  },
  props: {
    attribute: Object
  },
  data() {
    return {
      borderTypeList: [
        {label: 'solid', value: 'solid'},
        {label: 'dashed', value: 'dashed'},
        {label: 'dotted', value: 'dotted'}
      ]
    }
  },
  methods: {}
}
</script>

